{% load my_tags %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My AI</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-5.3.0-dist/css/bootstrap.css">
    <script src="/static/plugins/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="/static/plugins/bootstrap-5.3.0-dist/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="/static/js/myjs.js"></script>
    <link rel="stylesheet" href="/static/css/verify.css">
    <script type="text/javascript" src="/static/js/verify.js"></script>
    <link rel="shortcut icon" href="/static/images/favicon.ico" />
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <nav class="navbar navbar-expand-xl bg-dark navbar-dark fixed-top">
            {% block title %}

            {% endblock %}
        </nav>
    </div>
    <div class="row clearfix"
         style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);width: 50%;">
        {% block midbody %}

        {% endblock midbody %}
    </div>
    <div class="container" id="msgAlert">
        <footer class="fixed-bottom">
            {% if messages %}
                <div class="container mt-3" style="width: 62%">
                {% for message in messages %}
                    {% if message.tags == 'error' %}
                        <div class="alert alert-danger alert-dismissible fade show hide">
                    {% else %}
                        <div class="alert alert-{{ message.tags }} alert-dismissible fade show hide">
                    {% endif %}
                {% with message|mySplit:"@" as msg %}
                    <strong>{{ msg.0 }}:</strong>{{ msg.1 }}
                {% endwith %}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </footer>
    </div>
</div>

</body>
</html>